<template>
	<view class="main">
		<!-- header -->
		<view class="header_nav">
			<view class="header_left">
				<image src="../../static/nft_search.png"></image>
				<text style="margin-right: 20rpx;">我的藏品</text>
				<text>{{ total }}</text>
			</view>
			<view class="header_right" @click="showSort">
				<image src="../../static/time.png"></image>
				<text>时间</text>
			</view>
		</view>
		<view class="content" style="height: 100%;">
			<view class="content_list">
				<!-- 藏品列表 -->
				<scroll-view @scrolltolower="() => updataList()" :scroll-y="true" class="content-scroll">
					<view class="content_box" v-for="(res, index) in myCollections" @click="myCollectionsDetail(res)"
						:key="index">
						<image :src="res.cover"></image>
						<view class="content_text">
							<view class="name">
								{{ res.collection_name }}
							</view>
							<view class="series">
								{{ res.brand_info.brand_name }}
							</view>
							<view class="about_box">
								<view class="status">持有中</view>
								<view class="counts">序号#{{ res.serialNo }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="content_notice">
					<view class="line"></view>
					<view class="other-font">
						{{(myCollections.length == 0 ? '暂无藏品' : '没有更多了' )}}
					</view>
					<view class="line"></view>
				</view>
			</view>
		</view>
		<SortPopup ref="sort" @change="changeSort" />
		<!-- <u-popup :show="sort">
      <view class="sort-list">
        <view
          class="sort-item"
          v-for="item in sortList"
          @click="changeSort(item)"
          :key="item.value"
        >
          <view class="sort-name">{{ item.label }}</view>
          <u-icon v-if="item.value == selectSort" name="checkbox-mark"></u-icon>
        </view>
        <view class="sort-item">
          <view class="sort-name" @click="closeSort">取消</view>
        </view>
      </view>
    </u-popup> -->
	</view>
</template>

<script>
	import api from '@/request/api.js'
	import log from '@/common/login.js'
	import SortPopup from '../../common/SortPopup/SortPopup.vue'
	export default {
		data() {
			return {
				userInfo: {}, // 用户信息
				selectSort: 1, // 当前选择的排序
				statusBarHeight: 0,
				titleBarHeight: 0,
				screenHeight: 0,
				token: '',
				page: '1',
				myCollections: [],
				total: '',
				isCollections: false,
			}
		},
		/* 我的藏品页面默认返回到首页 */
		onUnload() {
			// uni.reLaunch({
			// 	url: 'mine',
			// })
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.screenHeight * (750 / res.windowWidth) //将px 转换rpx
					console.log(this.screenHeight)
				},
			})
			let userInfo = uni.getStorageSync('userInfo')
			let token = userInfo.token
			let uid = userInfo.uid
			this.userInfo = userInfo
			// 加载我的藏品需判断用户是否登录
			if (token == '') {
				/* 提示用户需要登录操作 */
				uni.showModal({
					title: '提示',
					content: '请先登录再进行操作',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定')
							uni.redirectTo({
								url: 'mine',
							})
						} else if (res.cancel) {
							this.getCollectionList(token, uid)
						}
					},
				})
			} else {
				this.getCollectionList(token, uid)
			}
		},
		onPullDownRefresh() {
			this.updataList('reset')
		},
		methods: {
			/* 我的藏品详情 */
			myCollectionsDetail(item) {
				uni.navigateTo({
					url: 'My_collection_detail?id=' + item.id,
				})
			},
			getCollectionList(token, uid) {
				api
					.myCollection({
						uid: uid, //用户唯一id
						page: this.page,
						token: token,
					})
					.then((res) => {
						if (!res.data.data.length == 0 && this.page == 1) {
							this.myCollections = res.data.data
						} else if (
							!res.data.data.length == 0 &&
							this.page > 1
						) {
							let more = res.data.data
							for (let i = 0; i < more.length; i++) {
								this.myCollections.push(more[i])
							}
						}
						this.total = res.data.total

						if (this.myCollections.length == 0) {
							this.isCollections = true
						}
					})
			},
			// 触底翻页
			onReachBottom() {
				this.page = this.page + 1
				/* 开始请求数据 */
				this.getCollectionList()
			},
			// 显示时间排序
			showSort() {
				this.$refs.sort.showSort()
			},

			// 切换排序
			changeSort(item) {
				this.selectSort = item.value
				this.updataList('sort')
			},
			// 刷新列表
			async updataList(reset) {
				if (this.myCollections.length < this.page * 10 && !reset) {
					uni.stopPullDownRefresh()
					return
				}
				if (!reset) {
					this.page++
				} else if (reset == 'reset') {
					this.page = 1
				}

				const data = {
					page: this.page,
					sort_type: this.selectSort,
				}
				try {
					const list = await api.myCollection(data)
					this.myCollections = reset ?
						list.data.data :
						this.myCollections.concat(list.data.data)
					this.total = list.data.total
					if (this.myCollections.length == 0) {
						this.isCollections = true
					}
					uni.stopPullDownRefresh()
				} catch (error) {
					uni.stopPullDownRefresh()
				}
			},
		},
		components: {
			SortPopup,
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #181816;
		min-height: 100vh;
		overflow: hidden;
	}
	// page {
	//   background-color: #181816;
	//   height: 100%;
	// }

	.header_nav {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.header_left {
			// min-width: 180rpx;
			// max-width: 220rpx;
			padding-right: 27rpx;
			display: flex;
			height: 60rpx;
			line-height: 60rpx;

			font-size: 26rpx;
			color: #4effff;
			background-color: rgba(128, 128, 128, 0.15);
			border-radius: 0rpx 28rpx 28rpx 0rpx;

			image {
				margin: 15rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.header_right {
			display: flex;
			margin-right: 20rpx;
			color: #999999;
			line-height: 60rpx;
			font-size: 26rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin: 12rpx;
			}
		}
	}

	.content {
		width: 90%;
		margin: auto;
		height: fit-content;

		.content_list {
			display: flex;
			flex-direction: column;

			.content-scroll {
				// height: calc(100vh - 60rpx);
				max-height: fit-content;
				// height: calc(100vh - 60rpx);
				box-sizing: border-box;
				padding: 40rpx 0;

				.content_box {
					display: flex;
					border-radius: 20rpx;
					// height: 250rpx;
					// margin: 10rpx 0;
					margin-bottom: 20rpx;
					background-color: #242424;

					image {
						background-color: #ffffff;
						width: 230rpx;
						height: 230rpx;
						margin: 20rpx 22rpx 20rpx 20rpx;
						border-radius: 20rpx;
					}

					.content_text {
						display: flex;
						flex-direction: column;

						.name {
							font-family: PingFang-SC-Medium;
							font-size: 36rpx;
							line-height: 36rpx;
							letter-spacing: 0rpx;
							color: #ffffff;
							word-break: break-all;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 1;
							line-clamp: 1;
							-webkit-box-orient: vertical;
							// line-height: 100%;
							height: 36rpx;
						}

						.series {
							font-size: 30rpx;
							margin: 30rpx 0;
							color: #cccccc;
							font-family: PingFang-SC-Medium;
							letter-spacing: 0rpx;
							word-break: break-all;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							line-clamp: 1;
							-webkit-box-orient: vertical;
						}

						view {
							font-family: PingFang-SC-Medium;
							color: #ffffff;
							margin-top: 30rpx;
						}

						.about_box {
							display: flex;
							margin: 0;

							.status {
								// min-width: 100rpx;
								// max-width: 180rpx;
								margin: 0;
								font-size: 24rpx;
								text-align: center;
								color: #4effff;
								border: 1px solid #4effff;
								padding: 0 15rpx;
								height: 40rpx;
								line-height: 40rpx;
							}

							.counts {
								// min-width: 100rpx;
								// max-width: 180rpx;
								margin: 0;
								font-size: 24rpx;
								text-align: center;
								color: #4effff;
								border: 1px solid #4effff;
								padding: 0 15rpx;
								height: 40rpx;
								line-height: 40rpx;
								margin-left: 22rpx;
							}

							.status,
							.counts {
								border-radius: 5px;
							}
						}

						.name {
							width: calc(685rpx / 2);
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							line-height: 30rpx;
						}
					}
				}
			}
		}

		.content_notice {
			margin: 0 auto;
			height: 36px;
			line-height: 36px;
			align-items: center;
			display: flex;

			.other-font {
				padding: 0 18rpx 0;
				color: #666666;
				font-size: 24rpx;
			}

			.line {
				height: 1.5rpx;
				width: 50rpx;
				// background: linear-gradient(to right, #181816, #4effff, #181816);
				background-image: linear-gradient(to right,
						rgba(245, 245, 245, 0),
						rgba(245, 245, 245, 0.6));

				&:last-child {
					background-image: linear-gradient(to right,
							rgba(245, 245, 245, 0.6),
							rgba(245, 245, 245, 0));
				}
			}
		}
	}

	// 排序弹窗

	// ::v-deep .u-icon {
	//   position: absolute;
	//   right: 300rpx;
	// }
</style>
